
import React from 'react';
import { Button, Card, List } from "antd";
import { useElement } from "tools/hooks/useElement";
import { AnimationClip } from 'three';
import { GLTF } from 'components/Three/Controller/State/Element';

/** 动画面板 */
export default function AnimationCard() {

    const { element } = useElement();

    const gltf = React.useMemo<GLTF | undefined>(() => {
        if (!element) return undefined
        if (element.type === 'gltf') {
            return element.object3D as GLTF;
        }
    }, [element])

    const animations = React.useMemo(() => gltf?.scene?.animations ?? [], [gltf])

    const onPlay = React.useCallback((item: AnimationClip) => {
        gltf?.play(item.name);
    }, [gltf])

    const onStop = React.useCallback(() => {
        gltf?.stop();
    }, [gltf])

    if (!animations || animations.length <= 0) return <></>;

    return (
        <Card title="动画" extra={<Button size='small' onClick={onStop} >停止</Button>} >
            <List
                dataSource={animations}
                renderItem={(item) => (
                    <List.Item actions={[<Button size='small' onClick={() => { onPlay(item) }} >播放</Button>]} >
                        {item.name}
                    </List.Item>
                )}
            />
        </Card>
    )
}